<template>
  <div class="sidebar-container">
    <div class="sidebar-tabs">
      <div class="sidebar-tab active">资源管理器</div>
    </div>
    <el-input v-model="filterText" placeholder="搜索资源..." size="small" class="sidebar-search" clearable />
    <el-tree
      :data="treeData"
      :props="defaultProps"
      :expand-on-click-node="false"
      :default-expanded-keys="['1', '1-1', '1-2']"
      :highlight-current="true"
      :filter-node-method="filterNode"
      ref="treeRef"
      class="sidebar-tree"
    >
      <template #default="{ node, data }">
        <span class="tree-label" :style="{ color: data.highlight ? '#f56c6c' : '' }">{{ data.label }}</span>
        <el-dropdown trigger="click">
          <span class="tree-more-btn" @click.stop>
            <el-icon><MoreFilled /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-dropdown trigger="hover" placement="right-start">
                  <span>新建</span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>资源组</el-dropdown-item>
                      <el-dropdown-item @click="handleDropdownItemClick">数据连接</el-dropdown-item>
                      <el-dropdown-item disabled>流程集成</el-dropdown-item>
                      <el-dropdown-item disabled>数据服务</el-dropdown-item>
                      <el-dropdown-item disabled>API</el-dropdown-item>
                      <el-dropdown-item disabled>流程模板</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-dropdown-item>
              <el-dropdown-item command="rename">重命名</el-dropdown-item>
              <el-dropdown-item command="auth">授权来源</el-dropdown-item>
              <el-dropdown-item command="move">移动</el-dropdown-item>
              <el-dropdown-item disabled command="delete">删除</el-dropdown-item>
              <el-dropdown-item command="refresh">刷新</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { MoreFilled } from '@element-plus/icons-vue'
import emitter from '../event-bus'
const filterText = ref('')
const treeRef = ref(null)
const treeData = [
  {
    id: '1',
    label: '数据连接',
    children: [
      {
        id: '1-1',
        label: '公共连接组-数据连接',
        children: []
      },
      {
        id: '1-2',
        label: '数据连接组-cyl',
        highlight: true,
        children: []
      }
    ]
  },
  { id: '2', label: '流程集成', children: [] },
  { id: '3', label: '数据服务', children: [] },
  { id: '4', label: 'API集成', children: [] },
  { id: '5', label: '场景模板', children: [] }
]
const defaultProps = {
  children: 'children',
  label: 'label'
}
function filterNode(value, data) {
  if (!value) return true
  return data.label.includes(value)
}
watch(filterText, (val) => {
  treeRef.value && treeRef.value.filter(val)
})
// 在methods中
function handleDropdownItemClick() {
  emitter.emit('open-create-connection')
}

</script>

<style scoped>
.sidebar-container {
  position: relative;
  padding: 44px 8px 0 0;
}
.sidebar-tabs {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 60px;
  background: #2c3e50;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
  box-sizing: border-box;
}
.sidebar-tab {
  background: #2c3e50;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px 10px 0 0;
  padding: 6px 24px 6px 24px;
  margin-right: 8px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
  position: relative;
  z-index: 2;
}
.sidebar-tab.active {
  background: #fff;
  color: #222;
  box-shadow: 0 -2px 8px 0 rgba(0,0,0,0.03);
  border-bottom: 2px solid #fff;
  border-radius: 18px 18px 0 0;
  padding: 6px 18px;
  font-size: 16px;
  position: relative;
  z-index: 101;
}
.sidebar-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}
.sidebar-search {
  margin-top: 16px;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.sidebar-tree {
  background: #fff;
  border: none;
  position: relative;
  z-index: 2;
}
.sidebar-tree .el-tree-node__content {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.tree-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tree-more-btn {
  margin-left: 0;
  cursor: pointer;
  color: #b0b0b0;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.tree-more-btn:hover {
  color: #409eff;
}
.el-dropdown-menu .el-dropdown-menu {
  left: 100% !important;
  top: 0 !important;
  margin-left: 4px !important;
}
.sidebar-tree .el-tree-node__content .tree-more-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.sidebar-tree .el-tree-node__content:hover .tree-more-btn {
  opacity: 1;
  pointer-events: auto;
}
</style> 